<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>小区新闻政务栏</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="../welcome.html">首页</a>
        <a href="userNews.html">新闻内容</a>
      </span>
    </div>
    <div class="x-body">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so"  method="post" >
          <input class="layui-input" placeholder="开始日" name="start" id="start">
          <input class="layui-input" placeholder="截止日" name="end" id="end">
          <input type="text" id="keyword" name="keyword"  placeholder="搜索" autocomplete="off" class="layui-input">
          <button class="layui-btn" id="NewsSearch" ><i class="layui-icon">&#xe615;</i></button>
      		<a class="layui-btn layui-btn-small" style="line-height:2.5em;" href="javascript:location.replace(location.href);" title="刷新">
        		<i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </form>
        
      </div>
      <xblock>
        <span class="x-right" style="line-height:40px">共有数据：<span id="listnum"></span>条</span>
      </xblock>
      <table class="layui-table">
        <thead>
          <tr>
            <th>新闻标题</th>
            <th style="width:100px;">发布时间</th>
            </tr>
        </thead>
        <tbody id="shownews">
          
        </tbody>
      </table>
      <div class="layui-table" id="page">
        
      </div>

    </div>
	<script>
        
        layui.use(['laytpl','laypage','form','laydate'], function(){
        	
        	var laypage = layui.laypage;
            var form = layui.form;
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
              elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
              elem: '#end' //指定元素
            });
            //第一次页面加载执行查询所有数据
        	$(function(){
        		showNews();
        	});
        	
        	//按照条件查询的表单提交
        	form.on("submit()",function(data){
        		
        		var startTime = $("#start").val();
        	    var endTime = $("#end").val();
        	    var keyword = $("#keyword").val();
        	    var jsondata={};
        		if(startTime!=""){
        			jsondata.startTime=startTime
        		};
            	if(endTime!=""){
            		jsondata.endTime=endTime;
            	};
            	if(keyword!=""){
            		jsondata.keyword=keyword;
            	};
        	    
        	    showNews(jsondata);
        		return false;
        	});
        	
        	
        	

        //渲染，分页的函数
        function showNews(jsondata){
        	
        	console.log(jsondata);
        	
     	   $.ajax({
 	    		type: "post",
 	    		url: "../userNews/reader",
 	    		async: true,
 	    		data:jsondata,
 	    		dataType:'json',
 	    		success: function(map) {
 	    	//		var arrId = [];//装id
 	    			document.getElementById("listnum").innerHTML=map.size;
 	    			
 	    			//分页
 	    			laypage.render({
 	    	    	    elem: 'page' //注意，这里的 test1 是 ID，不用加 # 号
 	    	    	    ,count: map.size //数据总数，从服务端得到
 	    	    	    ,limit: 10
 	    	    	    ,skip: true //开启跳页
 	    	    	    ,jump: function(obj, first){
 	    	    	    	      //模拟渲染
 	    	    	    	      document.getElementById("shownews").innerHTML = function(){
 	    	    	    	    	
 	    	    	    	        var arr = []
 	    	    	    	        ,thisData = map.listnews.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
 	    	    	    	        layui.each(thisData, function(index, item){
 	    	    	    	        	//前端数据显示的调整
 	    	    	    	        	if(item.time==null||item.time==""){
 	    	    	    	        		item.time="";
 	    	    	    	        	}else{
											item.time=toMyDateString(item.time);
 	    	    	    	        	}
										//数据模板的渲染
 	    	    	    	        	var getTpl = document.getElementById("tplnews").innerHTML;
 	    	    	    	        	arr.push(layui.laytpl(getTpl).render(item));
 	    	    	    	        });
 	    	    	    	         return arr.join(''); 
 	    	    	    	      }();
 	    	    	    	      
 	    	    	    	      
 	    	    	    	      //点击查看新闻内容
 	    	    	    	     $(".newsWatch").bind("click",function(){
 	   	    			    	  var newsID=this.getAttribute("id");
 	   	    			    	  BoxShow('内容','./newsInfo.html?id='+newsID);
 	   	    			       });
 	    	    	   	}
	    	    	 });
 	    		},
 	    		error: function() {
 	    			layer.alert("数据异常", {icon: 2,time:1500});
 	    		}
 	    	});
        }

        //日期转换函数
        function toMyDateString(timeMillis){
        	var time = new Date(timeMillis);
        	time = time.getFullYear()+"-"+(time.getMonth()+1)+"-"+time.getDate();
        	return time;
        }
  });
        
        //二级窗体创建
        function BoxShow(title,url,w,h){
        	if (title == null || title == '') {
                title=false;
            };
            if (url == null || url == '' || url == undefined) {
                url="404.html";
            };
            if (w == null || w == '' || w == undefined) {
                w=350;
            };
            if (h == null || h == '' || h == undefined) {
                h=450;
            };
            layer.open({
                type: 2,
                area: [w+'px', h +'px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                shade:0.4,
                title: title,
                content: url
            });
        }
    </script>

  </body>
  
  <script id="tplnews" type="text/html">
 
  <tr id="tr{{ d.newsId }}">
    <td><a href="javascript:;" id={{ d.newsId }} class="newsWatch">{{ d.newsTitle }}</a></td>
    <td>{{ d.time }}</td>
  </tr>
    </script>

</html>